import React from 'react';
import { Card, Row, Col, Progress, Statistic, Table, Alert } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

interface ResourceMetric {
  name: string;
  total: number;
  used: number;
  unit: string;
  status: 'normal' | 'warning' | 'danger';
}

interface ProcessInfo {
  id: string;
  name: string;
  cpu: number;
  memory: number;
  diskRead: number;
  diskWrite: number;
  networkIn: number;
  networkOut: number;
  startTime: string;
}

const ResourceMonitor: React.FC = () => {
  // 模拟资源指标数据
  const resourceMetrics: ResourceMetric[] = [
    {
      name: 'CPU',
      total: 100,
      used: 45,
      unit: '%',
      status: 'normal',
    },
    {
      name: '内存',
      total: 32,
      used: 24,
      unit: 'GB',
      status: 'warning',
    },
    {
      name: '系统盘',
      total: 500,
      used: 450,
      unit: 'GB',
      status: 'danger',
    },
    {
      name: '数据盘',
      total: 2000,
      used: 1200,
      unit: 'GB',
      status: 'normal',
    },
  ];

  // 模拟进程信息数据
  const processData: ProcessInfo[] = [
    {
      id: 'P001',
      name: 'java',
      cpu: 25.5,
      memory: 2.1,
      diskRead: 1.2,
      diskWrite: 0.5,
      networkIn: 2.5,
      networkOut: 1.8,
      startTime: '2024-01-20 08:00:00',
    },
    {
      id: 'P002',
      name: 'nginx',
      cpu: 5.2,
      memory: 0.8,
      diskRead: 0.3,
      diskWrite: 0.1,
      networkIn: 15.6,
      networkOut: 12.3,
      startTime: '2024-01-20 08:00:00',
    },
    {
      id: 'P003',
      name: 'mysql',
      cpu: 15.8,
      memory: 4.2,
      diskRead: 5.6,
      diskWrite: 3.2,
      networkIn: 1.2,
      networkOut: 0.9,
      startTime: '2024-01-20 08:00:00',
    },
  ];

  const getStatusColor = (status: ResourceMetric['status']) => {
    switch (status) {
      case 'normal':
        return '#52c41a';
      case 'warning':
        return '#faad14';
      case 'danger':
        return '#f5222d';
      default:
        return '#52c41a';
    }
  };

  const columns: ColumnsType<ProcessInfo> = [
    {
      title: '进程ID',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '进程名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: 'CPU使用率',
      dataIndex: 'cpu',
      key: 'cpu',
      width: 120,
      render: (value: number) => `${value}%`,
      sorter: (a, b) => a.cpu - b.cpu,
    },
    {
      title: '内存使用',
      dataIndex: 'memory',
      key: 'memory',
      width: 120,
      render: (value: number) => `${value} GB`,
      sorter: (a, b) => a.memory - b.memory,
    },
    {
      title: '磁盘IO',
      children: [
        {
          title: '读取',
          dataIndex: 'diskRead',
          key: 'diskRead',
          width: 100,
          render: (value: number) => `${value} MB/s`,
        },
        {
          title: '写入',
          dataIndex: 'diskWrite',
          key: 'diskWrite',
          width: 100,
          render: (value: number) => `${value} MB/s`,
        },
      ],
    },
    {
      title: '网络IO',
      children: [
        {
          title: '接收',
          dataIndex: 'networkIn',
          key: 'networkIn',
          width: 100,
          render: (value: number) => `${value} MB/s`,
        },
        {
          title: '发送',
          dataIndex: 'networkOut',
          key: 'networkOut',
          width: 100,
          render: (value: number) => `${value} MB/s`,
        },
      ],
    },
    {
      title: '启动时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: 180,
    },
  ];

  return (
    <div>
      {/* 系统资源告警 */}
      
      {/* 资源使用概览 */}
      <Row gutter={[16, 16]}>
        {resourceMetrics.map(metric => (
          <Col span={6} key={metric.name}>
            <Card>
              <Statistic
                title={metric.name}
                value={metric.used}
                suffix={`/ ${metric.total} ${metric.unit}`}
                precision={1}
              />
              <Progress
                percent={Math.round((metric.used / metric.total) * 100)}
                strokeColor={getStatusColor(metric.status)}
                size="small"
                status={metric.status === 'danger' ? 'exception' : 'normal'}
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 网络流量统计 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={12}>
          <Card>
            <Statistic
              title="网络流入"
              value={93.2}
              precision={1}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowDownOutlined />}
              suffix="MB/s"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Statistic
              title="网络流出"
              value={68.5}
              precision={1}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowUpOutlined />}
              suffix="MB/s"
            />
          </Card>
        </Col>
      </Row>

      {/* 进程资源占用 */}
      <Card title="进程资源占用" style={{ marginTop: 16 }}>
        <Table<ProcessInfo>
          columns={columns}
          dataSource={processData}
          rowKey="id"
          scroll={{ x: 1200 }}
          pagination={false}
        />
      </Card>
    </div>
  );
};

export default ResourceMonitor; 